<!--
 * @Author: 王雁鹏
 * @Date: 2023-04-07 22:05:10
 * @LastEditTime: 2023-04-11 23:07:37
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \expressf:\weapp\tie-quan1\src\pages\menu\index.vue
 * -------------------------------------
-->
<template>
    <view class="index">
        <cover-view class='menu-top'>
            <cover-image class='img' src='../../assets/images/rwm.png' />
        </cover-view>
        <view class="select-input" hover-class="none" hover-stop-propagation="false">
            <input type="text" placeholder="最大输入长度为 10" maxLength="10" />
        </view>
    <nut-tabs v-model="tab4value" title-scroll title-gutter="10" direction="vertical" name="tab4value">
        <nut-tab-pane v-for="(item, index) in list4" :title="'Tab ' + item" :key="index">
                Tab {{ item }}
            </nut-tab-pane>
        </nut-tabs>
        <view class="menu-context">
            <view class="menu-btn">
                <view v-for="(item, index) in list" :key="index" @click="handleClick(item)">
                    <!-- <view class="menu-item" hover-class="none" hover-stop-propagation="false">
                                                                                                                                                                        丐姐的菜单
                                                                                                                                                                    </view> -->

                </view>
            </view>
            <view class="menu-box">
                <scroll-view :scroll-y="true" style="height: 300rpx;" @scroll="scroll" :scroll-into-view="toView"
                    :scroll-top="scrollTop">
                    <view id="demo1" class="list">
                        <cover-view class="list-img" scroll-top="0">
                            <cover-image class='img' src='../../assets/images/rwm.png' />
                        </cover-view>
                        <view class="list-context">
                            <view>123123</view>
                            <view class="list-item">
                                <view>
                                    <Icon size='60' type='info_circle' />
                                    23
                                </view>
                                <view>
                                    <span class="iconfont icon-jia"></span>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { Dongdong } from '@nutui/icons-vue-taro';
import { categoryData } from "../../model/3x_categoryData.js"
export default {
    name: 'Index',
    components: {
        Dongdong
    },
    setup() {
        const state = reactive({
            msg: '欢迎使用 NutUI4.0 开发小程序',
            msg2: '你成功了～',
            type: 'text',
            show: false,
            cover: false,
            toView: "name",
            scrollTop: 0,
            categoryInfo: categoryData.categoryInfo,
            category: categoryData.category,
            categoryChild: categoryData.categoryChild,
            tab4value: '0',
            list4: Array.from(new Array(10).keys()),
            list: [
                {
                    src: require('../../assets/images/demo.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
            ]
        });

        const handleClick = (type, msg, cover = false) => {
            state.show = true;
            state.msg2 = msg;
            state.type = type;
            state.cover = cover;
        };
        const scroll = () => {
            console.log("this is scroll")
        }

        const change = (index: any) => {
            state.categoryChild = [].concat(state.categoryInfo.category[index + 1].children as any);
        };
        const onChange = () => {
            console.log("当前分类数据");
        }
        return {
            onChange,
            change,
            ...toRefs(state),
            handleClick,
            scroll
        }
    }
}
</script>

<style lang="scss">
@import '../../assets/style/common.scss';

.index {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

.menu-top {
    height: 300rpx;
    overflow: hidden;
}

.menu-context {
    display: flex;
    background: #fff;
    height: calc(100vh - 400rpx);

    .menu-btn {
        width: 200rpx;
        padding-right: 10rpx;
        background: #f6f6f6;

        .menu-item {
            width: calc(100% - 10rpx);
            height: 70rpx;
            line-height: 70rpx;
            border-left: 10rpx solid rgba(0, 0, 0, 0);

            &:hover {
                border-left: 10rpx solid $color;
                background: $color;
                color: #fff;
            }
        }
    }

    .menu-box {
        width: calc(100% - 100rpx);
    }
}

// select组件样式
.select-input {
    padding: 20rpx;

    input {
        background: #f6f6f6;
        height: 72rpx;
        text-align: left;
        padding: 0rpx 30rpx;
        border-radius: 50px;
        width: 80%;
        margin: auto;
    }
}

// list组件样式
.list {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;

    .list-img {
        height: 100rpx;
        width: 100rpx;
    }

    .list-context {
        width: calc(100% - 120rpx);
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .list-item {
        display: flex;
        justify-content: space-between;
    }
}
</style>
